<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="icon" href="img/logo.ico">
    <title>Labs-阅读FM</title>
    <link rel="stylesheet" href="css/index2.css">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="./font/iconfont.css">
</head>

<body>
    <!-- 导航栏 -->
    <div class="hd">
        <div class="content hd-wp">
            <div class="logo">
                <a href="javascript:;" class="font">
                    <span class="mlogo fl row">
                        <span class="logo-a fl"></span>
                        <span class="logo-b fl"></span>
                        <span class="logo-c fl"></span>
                    </span>
                </a>
            </div>
            <div class="menu">
                <a href="javascript:;" class="red">阅读</a>
                <a href="javascript:;">情感</a>
                <a href="javascript:;">联播</a>
                <a href="javascript:;">校园</a>
                <a href="javascript:;">音乐</a>
                <a href="javascript:;">Labs</a>
            </div>
            <div class="search">
                <form action="" method="POST">
                    <input type="text" class="txt" name="username">
                    <button type="submit" class="ipt">
                        <i class="iconfont icon-sousuo"></i>
                    </button>
                </form>
            </div>
            <div class="logo" id="login">
                <div class="aaa">
                    <a class="btn-login" href="javascript:;">登录</a>
                    <a class="btn-register" href="javascript:;">注册</a>
                </div>
                <div class="masking">
                    <div class="login">
                        <p class="close delete">x</p>
                        <h3>登录</h3>
                        <form action="" id="login1">
                            <input type="text" name="username" placeholder="用户名" class="ipttn">
                            <br>
                            <input type="password" name="password" placeholder="密码" class="password">
                            <button type="submit">登录</button>
                        </form>
                        <div class="check">
                            <input type="checkbox" value="1" class="gou">下次自动登录
                            <p>记录密码</p>
                        </div>

                    </div>
                    <div class="register">
                        <p class="close del">x</p>
                        <h3>注册</h3>
                        <form id="form">
                            <input type="text" placeholder="昵称" class="btn" name="username">
                            <input type="text" name="usernameemail" placeholder="邮箱" class="ipt">
                            <br>
                            <input type="password" name="password" placeholder="密码" id="pwd">
                            <input type="password" name="repassword" placeholder="确认密码">
                            <button type="submit">注册</button>
                            <!-- <input type="submit" name="" id=""> -->
                        </form>

                        <div class="check">
                            <input type="checkbox" value="1" class="gou">下次自动登录
                            <p>记录密码</p>
                        </div>
                    </div>

                </div>

            </div>
        </div>
    </div>


    <!-- 什么样的男生值得去爱 -->
    <div class="bd">
        <div class="one3">
            <!-- <div class="left">
                <ul>
                    <li>
                        <div class="left2">
                            <img src="img/8.png" alt="">
                        </div>
                        <div class="right2">
                            <div class="channel-title"><a href="javascript:;">什么样的男生值得去爱</a></div>
                            <div class="channel-mete"><span class="iconfont icon-bi"></span><span>陈大力</span><span
                                    class="iconfont icon-yuyin"></span><span>陈大力</span><span
                                    class="iconfont icon-shizhong"></span><span>陈大力</span></div>
                            <div class="channel-desc">会有那么一个人出现，无怨无悔地陪我共度余生，尤其是在他逐渐发现，我的人生并没有那么好过后...</div>
                        </div>
                    </li>
                </ul>
            </div>-->
        </div>
        <!-- 翻页 -->
        <div class="left pg">
            <a href="javascript:;" class="cur">1</a>
            <a href="javascript:;">2</a>
            <a href="javascript:;">3</a>
            <a href="javascript:;">4</a>
            <a href="javascript:;">5</a>
            <a href="javascript:;">6</a>
            <a href="javascript:;">7</a>
            <a href="javascript:;">8</a>
            <a href="javascript:;">下一页</a>
        </div>
    </div>



    <!-- 右边 -->
    <div class="right">
        <div class="img">
            <img src="img/2.jpg" alt="">
        </div>
        <div class="channel-item">
            <div class="top">
                <!-- <div class="left"></div> -->
                <div class="moddli">情感频道TOP10</div>
            </div>
            <div class="font">
                <ul>
                    <li class="one">
                        <a href="">1:单生原因</a>
                        <div class="bottom"><span>文：铁名</span><span>主播：上官楚璇</span></div>
                    </li>
                    <li>
                        <a href="">1:单生原因</a>
                        <div class="bottom"><span>文：铁名</span><span>主播：上官楚璇</span></div>
                    </li>
                    <li>
                        <a href="">1:单生原因</a>
                        <div class="bottom"><span>文：铁名</span><span>主播：上官楚璇</span></div>
                    </li>
                    <li>
                        <a href="">1:单生原因</a>
                        <div class="bottom"><span>文：铁名</span><span>主播：上官楚璇</span></div>
                    </li>
                    <li>
                        <a href="">1:单生原因</a>
                        <div class="bottom"><span>文：铁名</span><span>主播：上官楚璇</span></div>
                    </li>
                    <li>
                        <a href="">1:单生原因</a>
                        <div class="bottom"><span>文：铁名</span><span>主播：上官楚璇</span></div>
                    </li>
                    <li>
                        <a href="">1:单生原因</a>
                        <div class="bottom"><span>文：铁名</span><span>主播：上官楚璇</span></div>
                    </li>
                    <li>
                        <a href="">1:单生原因</a>
                        <div class="bottom"><span>文：铁名</span><span>主播：上官楚璇</span></div>
                    </li>
                    <li>
                        <a href="">1:单生原因</a>
                        <div class="bottom"><span>文：铁名</span><span>主播：上官楚璇</span></div>
                    </li>
                    <li>
                        <a href="">1:单生原因</a>
                        <div class="bottom"><span>文：铁名</span><span>主播：上官楚璇</span></div>
                    </li>
                    <li>
                        <a href="">1:单生原因</a>
                        <div class="bottom"><span>文：铁名</span><span>主播：上官楚璇</span></div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    </div>

    <!-- 底部 -->
    <div class="dibu content">
        <div class="left">
            <div class="top">关于我们 | 加入我们</div>
            <div class="bottom">
                © 2010-2016 Yuedu.fm All rights reserved 粤ICP备14076392号</div>
        </div>
        <div class="right">
            <div><span class="iconfont icon-dashang
                "></span>
            </div>
            <div><span class="iconfont icon-weixin"></span>
            </div>
            <div><span class="iconfont icon-weibo"></span>
            </div>
        </div>
    </div>
    <div class="mask">正在加载......</div>
    <script src="js/jquery-1.12.4.js"></script>
    <script src="js/index2.js"></script>
    <script src="js/login.js"></script>
    <script>
        $(".mask").fadeIn(1000)
        function jsonp(url, data, cb) {
            var fnName = "fn_" + Date.now() + Math.floor(Math.random() * 10000000);
            window[fnName] = cb;
            url = data ? url + "?" + data + "&cb=" + fnName : url + "?cb=" + fnName;
            $(`<script src="${url}"><\/script>`).appendTo("body");
            console.log(url)
        }
    </script>
    <script>
        var index = 1;
        var type_id = 1
        //类型
        $(".menu").on("click", "a", function () {
            type_id = $(this).index() + 1;
            $(this).addClass("red").siblings().removeClass("red");
            su(index, type_id)
        })
        //页数
        $(".pg").on("click", "a", function () {
            index = $(this).text()
            $(this).addClass("cur").siblings().removeClass("cur");
            su(index, type_id)
        })

        su(index, type_id)
        function su(index, type_id) {
            jsonp("http://localhost/20190918/yueduziji/index.php", "id=" + index + "&" + "type_id=" + type_id, function (data) {
                console.log(data)
                var html = "";
                for (var i = 0; i < data.length; i++) {
                    html += `<div class="left">
                <ul>
                    <li>
                        <div class="left2">
                            <img src="${data[i].img_url}" alt="">
                        </div>
                        <div class="right2">
                            <div class="channel-title"><a href="index.html?id=${data[i].id}">${data[i].title}</a></div>
                            <div class="channel-mete"><span class="iconfont icon-bi"></span><span>${data[i].author}</span>
                                <span class="iconfont icon-yuyin"></span><span>${data[i].play_time}</span>
                                <span class="iconfont icon-shizhong"></span><span>${data[i].duration}</span></div>
                            <div class="channel-desc">${data[i].content.substr(0, 80)}</div>
                        </div>
                    </li>
                </ul>
            </div>`
                }

                $(".one3").html(html)
            })
            $(".mask").fadeOut(500, function () {
                $(this).remove()
            })
        }
    </script>
    <!-- 登陆 -->
    <script src="./jquery-validation-1.14.0/dist/jquery.validate.js"></script>
    <script src="./js/additional-methods.js"></script>
    <script src="js/jquery.cookie.js"></script>
    <script>


        var name = $.cookie('name')
        console.log(typeof name)
        if (name != 'undefined') {
            console.log(0)
            $(".aaa").html("Hello:" + name + "<br><span>退出</span>");
            // $("#login span").click(function () {
            //     $.removeCookie("name");
            //     $.removeCookie("pwd");
            //     // $("#login").remove()
            // })
        }
        // else {
        //     $("#login").html("<a class='btn-login' href ='javascript:;'> 登录</a><a class='btn-register' href = 'javascript:;'>注册</a >")
        // }

        $(function () {
            $("#login1").validate({
                submitHandler: function () {
                    var str = $("#login1").serialize();
                    console.log(str)
                    $.post("http://localhost/20190918/yueduziji/api/login.php", str, function (data) {
                        data = JSON.parse(data)
                        var password = $(".password").val()
                        var datapassword = data.password
                        var username = $(".ipttn").val()
                        console.log(username)
                        if (password == datapassword) {
                            alert("登陆成功")
                            $(".delete").click()
                            //清空表单
                            $("#login1")[0].reset()
                            // 存储cookie+
                            $.cookie("name", username, { expires: 7 });
                            $.cookie("pwd", password, { expires: 7 });
                            // 取出cookie
                            var name = $.cookie('name')
                            $("#login").html("Hello:" + name + "<br><span>退出</span>");
                            location.reload();
                        } else {
                            alert("登陆失败")
                        }

                    })
                },
                rules: {
                    username: {
                        required: true,
                        remote: {
                            url: "http://localhost/20190918/yueduziji/api/checkusername.php",
                            type: "post",
                            data: {
                                username: function () {
                                    return $(".ipttn").val()
                                }
                            }
                        }
                    },
                    password: {
                        required: true
                    }

                },
                messages: {
                    username: {
                        required: "请输入用户名",
                        remote: "用户名不存在"
                    },
                    password: {
                        required: "请输入密码",
                    }
                }

            })

            $("#login span").click(function () {
                $.removeCookie("name");
                $.removeCookie("pwd");
                var name = $.cookie('name')
                $(".aaa").html("<a class='btn-login' href='javascript:;'> 登录</a><a class='btn-register' href ='javascript:;'>注册</a>")

            })
        })


    </script>
    <!-- 注册 -->
    <script>
        $(function () {
            $("#form").validate({
                submitHandler: function () {
                    var str = $("#form").serialize();
                    $.post("http://localhost/20190918/yueduziji/api/username.php", str, function (data) {
                        console.log(data)
                        data = JSON.parse(data)
                        if (data.code == 200) {
                            alert(data.msg)
                            $("#form")[0].reset()
                            $(".del").click()
                            
                            
                        }
                    })
                },
                rules: {
                    username: {
                        required: true,
                        user: true,
                        rangelength: [6, 11],
                        remote: {
                            url: "http://localhost/20190918/yueduziji/api/checkusername.php",
                            type: "post",
                            data: {
                                username: function () {
                                    return $(".btn").val()
                                }
                            }
                        }
                    },
                    usernameemail: {
                        required: true,
                    },
                    password: {
                        required: true,
                        cehckPassword: true
                    },
                    repassword: {
                        required: true,
                        equalTo: "#pwd"
                    }
                },
                messages: {
                    username: {
                        required: "请输入用户名",
                        rangelength: "用户名长度6-12位之间",
                        remote: "已存在用户名,更换一个!"
                    },
                    usernameemail: {
                        required: "请输入邮箱",
                        usernameemail: "格式是:小写字母开头，6-12位的字符"
                    },
                    password: {
                        required: "请输入密码",
                        cehckPassword: "密码格式不正确"
                    },
                    repassword: {
                        required: "请再次输入密码",
                        equalTo: "两次输入的密码不一致"
                    }
                }
            })
        })


    </script>
</body>

</html>